<template>
  <div class="my-header">
    <el-tabs v-model="data.activeName" class="demo-tabs">
      <el-tab-pane label="学术论著" name="first">
        <el-form
          :rules="rules"
          ref="ruleFormRef"
          :model="ruleForm"
          label-width="150px"
          class="demo-ruleForm"
          status-icon
        >
          <el-row>
            <el-col :span="12">
              <el-form-item label="申请奖励作者的排名" prop="ranking">
                <el-input-number
                  :min="1"
                  type=""
                  placeholder=""
                  v-model="ruleForm.ranking"
                  style="width: 150px" :disabled="1"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="学术论著名称" prop="name">
                <el-input placeholder="" v-model="ruleForm.name" style="width: 150px"  :disabled="1"  />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="专著/期刊名称" prop="monographName">
                <el-input
                  placeholder=""
                  v-model="ruleForm.monographName"
                  style="width: 150px" :disabled="1"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="书号/刊号" prop="isbnBookNo">
                <el-input
                  placeholder=""
                  v-model="ruleForm.isbnBookNo"
                  style="width: 150px" :disabled="1"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="作者(单位)" prop="unitName">
                <!-- <el-input placeholder="" v-model="ruleForm.unitName" style="width: 150px" /> -->
                <popup-tree-input
                  :data="orgAllList"
                  :props="data.popupTreeProps"
                  :prop="ruleForm.unitName"
                  :node-key="'' + deptForm.parentId"
                  :current-change-handle="changeValue" :disabled="1"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="发表日期" prop="publicationDate">
                <el-date-picker
                  v-model="ruleForm.publicationDate"
                  type="date"
                  placeholder="发表日期"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD" :disabled="1"
                  style="width: 150px; margin-right: 15px"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="杂志等级" prop="workLevel">
                <el-input
                  placeholder=""
                  v-model="ruleForm.workLevel" :disabled="1"
                  style="width: 150px"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="奖励标准" prop="incentivestandard">
                <SelectOption
                  :selectValue="ruleForm.incentivestandard"
                  :options="options.jlbzList"
                  @change-value="changeValue3" :disabled="1"
                >
                </SelectOption>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts">
import PopupTreeInput from "@/views/science/components/PopupTreeInput/index.vue";
import SelectOption from "@/views/science/components/selectOption/index.vue";
import { computed, reactive, ref, watch } from "vue";
import { useStore } from "vuex";
export default {
  components: {
    SelectOption,
    PopupTreeInput,
  },
  emits: {
    usersChange: null,
    paramsChange: null,
    valueFlag2: null,
  },
  props: {
    fbData: {
      type: Object,
      required: true,
    },
    addFlag: {
      type: Number,
      required: true,
    },
    orgAllList: {
      type: Array,
      required: true,
    },
  },
  setup(props, { emit }) {
    const store = useStore();
    const labelPosition = ref("right");
    const deptForm = {
      parentId: 0,
      parentName: "",
    };
    const data = reactive({
      activeName: ref("first"),
      dialogVisible: false,
      lobarDisabled: false,
      popupTreeProps: {
        label: "name",
        children: "children",
      },
      props: {
        multiple: true,
        expandTrigger: "hover",
        value: "id",
        label: "name",
        children: "children",
        emitPath: false,
      },
      mainValue: [],
      mainValue1: [],
      chooseMatterList: [],
    });

    // 弹窗中三个下拉选择
    let options = reactive({
      projectnameList: computed(
        () => store.state.technologyStrength.KJSL_DECLARATION_TYPE
      ),
      unitnameList: computed(
        () => store.state.technologyStrength.KJSL_APPLYING_FOR_AWARDS1
      ),

      userAllList: computed(() => store.state.technologyStrength.userAllList),
      roleList: computed(() => store.state.technologyStrength.roleList),
      projectSelect: computed(() => store.state.technologyStrength.projectSelect),
      // hjTypeList: computed(() => store.state.technologyStrength.KJSL_AWARD_CATEGORY),

      hjjbList: computed(() => store.state.technologyStrength.KHGL_KJSL_HJJB),
      hjTypeList: [],
      hjdjList: [],
      jlbzList: [
        {
          id: "1",
          itemText: "SCI 收录期刊论文0.5万",
          itemValue: 0.5,
        },
        {
          id: "2",
          itemText:
            "EI、ISTP 收录或在国际学告，不包含中国出版的外文版期刊。术期刊论文0.3万",
          itemValue: 0.3,
        },
        {
          id: "3",
          itemText: "中国交建优秀论文0.3万",
          itemValue: 0.3,
        },
        {
          id: "4",
          itemText: "正式出版有书号的与公路行业相关的专著2万",
          itemValue: 2,
        },
      ],
    });

    const composition = ref(props.fbData);
    // 提交表单-字段对照新增接口-然后同步
    const ruleForm = reactive({
      id: "",
      awardApplyId: "1",
      ranking: "",
      rankingId: "",
      name: "",
      monographName: "",
      isbnBookNo: "",
      unitName: "",
      unitId: "",
      publicationDate: "",
      workLevel: "",
      workLevelId: "",
      incentivestandard: "",
      incentivestandardid: "",
    });

    const handleData = (data) => {
      const arr1 = Object.keys(data);
      const list = ruleForm;
      for (const key in list) {
        if (arr1.indexOf(key) !== -1) {
          list[key] = data[key];
        }
      }
      return list;
    };

    if (props.fbData) Object.assign(ruleForm, handleData(props.fbData));
    watch(props, (newValue, oldValue) => {
      composition.value = newValue.fbData;
      Object.assign(ruleForm, handleData(newValue.fbData));
    });

    watch(ruleForm, (newValue, oldValue) => {
      emit("paramsChange", newValue);
    });

    // watch(
    //     () => props.addFlag,
    //     (newVal, oldVal) => {
    //         Object.keys(ruleForm).forEach((key) => {
    //             ruleForm[key] = ''
    //         })
    //     }
    // )

    const changeValue = (item) => {
      ruleForm.unitId = item.id;
      ruleForm.unitName = item.name;
    };
    const changeValue3 = (item) => {
      ruleForm.incentivestandard = item.itemText;
      ruleForm.incentivestandardid = item.itemValue;
    };
    // 新增
    const rules = reactive({
      ranking: [
        { required: true, message: "请输入申请奖励作者的排名", trigger: "change" },
      ],
      name: [{ required: true, message: "请输入学术论著名称", trigger: "change" }],
      monographName: [
        { required: true, message: "请输入专著/期刊名称", trigger: "change" },
      ],
      isbnBookNo: [{ required: true, message: "请输入书号/刊号", trigger: "blur" }],
      unitName: [{ required: true, message: "请输入作者(单位)", trigger: "change" }],
      publicationDate: [{ required: true, message: "请输入发表日期", trigger: "change" }],
      workLevel: [{ required: true, message: "请输入杂志等级", trigger: "blur" }],
      incentivestandard: [{ required: true, message: "请输入奖励标准", trigger: "blur" }],
    });

    const ruleFormRef = ref();
    const submitForm = async () => {
      ruleFormRef.value.validate((valid) => {
        if (valid) {
          emit("valueFlag2", true);
        } else {
          emit("valueFlag2", false);
        }
      });
    };

    return {
      open,
      ruleForm,
      rules,
      ruleFormRef,
      labelPosition,
      deptForm,
      data,
      options,

      changeValue,
      submitForm,
      changeValue3,
    };
  },
};
</script>
<style lang="scss" scoped>
.personAddBtn {
  position: absolute;
  bottom: 0;
  right: 0;
}

.demo-form-inline .el-form-item {
  width: 48%;
}

:deep(.labelHeight .el-form-item__label) {
  line-height: 20px;
}

:deep(.el-date-editor.el-input) {
  width: 100%;
}

:deep(.el-date-editor.el-input__inner) {
  width: 100%;
}

:deep(.demo-form-inline .el-select) {
  width: 100%;
  margin: 0;
}

.el-select {
  width: 100%;
  margin: 0;
}

.selectLabel {
  width: 70%;
  min-height: 40px;
  line-height: 40px;
  padding: 0 15px;
  border: 1px solid #ccc;
  border-radius: 6px;
  display: inline-block;
}

.addLabel {
  display: inline-block;
  width: 120px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: #169bd5;
  border-radius: 6px;
  color: #fff;
  margin-left: 15px;
}

.unitBox {
  width: 100%;
  margin: 30px 0;

  .title {
    padding: 15px 0;
    border-bottom: 1px solid #ccc;
  }

  .tagBox {
    line-height: 40px;
    margin-top: 15px;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 10px 15px;
  }
}

.el-tag {
  margin-right: 10px;
}

.content-box {
  width: 250px;
  height: 33px;
  padding: 5px;
  box-sizing: border-box;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.select {
  color: #eee;
}

.align-center {
  align-items: center;
}

.space-between {
  justify-content: space-between;
}

.mt20 {
  margin-top: 20px;
}

.flex {
  display: flex;
}

.handle {
  position: absolute;
  top: 17px;
  right: 20px;
  display: flex;
  align-items: center;
}

.search-box {
  display: flex;
  justify-content: end;
  align-items: center;
  margin-bottom: 10px;
}
</style>
